// JavaScript Document

// 	GLOBAL VARIABLES
	// 1 year
	const chartLength = 13; 
	const stepSize = 4;
	// 5 year
	const chartLength5 = 61; 
	const stepSize5 = 20;
	// 10 year
	const chartLength10 = 121; 
	const stepSize10 = 40;
	
	const columnNumber = 4;
	var data;
//	END GLOBAL VARIABLES

$(document).on('pageshow', '#button1', function(){  
	$(document).ready(function() {
									var options = {
										chart: {
											renderTo: 'container',
											defaultSeriesType: 'line',
											marginLeft: 45,							//	sets left margin
											marginRight: 25,	
											zoomType: 'x',
											marginBottom: 50,
											height: $(window).height()-20,  // $(window).width(),
											showAxes: true,
											reflow: true,
										},
										plotOptions: {
													line:{							// change to what ever the type is set to
														marker: {
															enabled: false			// gets ride of points on the line
														}
													}
										},
										title: {
											text: 'National Employment'
										},
										xAxis: {
											type: 'datetime',
											categories: [ ],
											//gridLineWidth: 1,
												labels: {
													align: 'center',				//	aligns x axis labels to the left
													rotation: 0,
													step: stepSize,					// displayes every n'th tick label
													y: 20,
													//x: -10,	
													
												},
											lineWidth: 2,
										},
										yAxis: {
											title: {
												text: 'Employment Rate',
												x: 5,								//	moves text in x direction
											},
											lineWidth: 2,
																		// adds y axis line
											labels: {								//	aligns x axis labels to the left
													rotation: 0,
													x: -4,							//	shifts tick labels in x direction
											},
											
											gridLineWidth: 0,
										},
										exporting: {								// disables of the exporting button
											buttons: {
												contextButton: {
													enabled: false,
												},
											},
										},
										legend:{
											margin: 20,
											enabled: false,							// disables legend box
										},
										series: [ ]
									};
							$.get('http://143.88.100.77:20000/test/WebForm1.aspx?countyunemployment', function (data1) 
									{ 
										data = data1;
										var lines = data.split("~");
										// Iterate over the lines and add categories or series
									   $.each(lines, function(lineNo, line) {
											var items = line.split('=');	
										   if (lineNo == 0) {
												$.each(items, function(columnNo, item) {
														options.xAxis.categories.push(item);
												});
											}  // end if statement
											else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
												
												var series = {data: [ ]};
													$.each(items, function(rowNo, item) 
															{
																if (rowNo < chartLength) {
																series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
															};
													});//end of $.each
													series.name = 'National';					// adds name of the series
													options.series.push(series);
											}
										});	//end of $.each
										// Create the chart
										var chart = new Highcharts.Chart(options);
									});  //end of $.get
								});
		$(window).on("orientationchange", function(event) {
			var orientationTest = event.orientation;
				function getDevice() {
				return ($(window).height()	
				)};
					if ((orientationTest == 'portrait') ) {
									$(document).ready(function() {
										var options = {
											chart: {
												renderTo: 'container',
												defaultSeriesType: 'line',
												marginLeft: 45,							//	sets left margin
												marginRight: 25,	
												zoomType: 'x',
												marginBottom: 50,
												height: $(window).height()-20,  // subtracts footer height
												showAxes: true,
												reflow: true,
											},
											plotOptions: {
														line:{							// change to what ever the type is set to
															marker: {
																enabled: false			// gets ride of points on the line
															}
														}
											},
											title: {
												text: 'National Employment'
											},
											xAxis: {
												type: 'datetime',
												categories: [ ],
												//gridLineWidth: 1,
													labels: {
														align: 'center',				//	aligns x axis labels to the left
														rotation: 0,
														step: stepSize,						// displayes every n'th tick label
														y: 20,
														//x: -10,
												lineWidth: 2,	
													},
											},
											yAxis: {
												title: {
													text: 'Employment Rate',
													x: 5,								//	moves text in x direction
												},
												labels: {								//	aligns x axis labels to the left
														rotation: 0,
														x: -4,							//	shifts tick labels in x direction
												},
												gridLineWidth: 0,
												lineWidth: 2,
											},
											exporting: {
												buttons: {
													contextButton: {
														enabled: false,
													},
												},
											},
											legend:{
												margin: 20,
												enabled: false,							// disables legend box
											},
											series: [ ]
										};
											var lines = data.split("~");
											// Iterate over the lines and add categories or series
										   $.each(lines, function(lineNo, line) {
												var items = line.split('=');	
											   if (lineNo == 0) {
													$.each(items, function(columnNo, item) {
															options.xAxis.categories.push(item);
													});
												}  // end if statement
												else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
													
													var series = {data: [ ]};
														$.each(items, function(rowNo, item) 
																{
																	if (rowNo < chartLength) {
																	series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
																};
														});//end of $.each
														series.name = 'National';					// adds name of the series
														options.series.push(series);
												}
											});	//end of $.each
											
											// Create the chart
											var chart = new Highcharts.Chart(options);
									});
					}else{
									$(document).ready(function() {
										var options = {
											chart: {
												renderTo: 'container',
												defaultSeriesType: 'line',
												marginLeft: 45,							//	sets left margin
												marginRight: 25,	
												zoomType: 'x',
												marginBottom: 50,
												height: $(window).height()-20,  // $(window).width(),
												showAxes: true,
												reflow: true,
											},
											plotOptions: {
														line:{							// change to what ever the type is set to
															marker: {
																enabled: false			// gets ride of points on the line
															}
														}
											},
											title: {
												text: 'National Employment'
											},
											xAxis: {
												type: 'datetime',
												categories: [ ],
												//gridLineWidth: 1,
													labels: {
														align: 'center',				//	aligns x axis labels to the left
														rotation: 0,
														step: stepSize,						// displayes every n'th tick label
														y: 20,
														//x: -10,
														lineWidth: 2,	
													},
											},
											yAxis: {
												title: {
													text: 'Employment Rate',
													x: 5,								//	moves text in x direction
												},
												labels: {								//	aligns x axis labels to the left
														rotation: 0,
														x: -4,							//	shifts tick labels in x direction
												},
												gridLineWidth: 0,
												lineWidth: 2,
											},
											exporting: {
												buttons: {
													contextButton: {
														enabled: false,
													},
												},
											},
											legend:{
												margin: 20,
												enabled: false,							// disables legend box
											},
											series: [ ]
										};
											var lines = data.split("~");
											// Iterate over the lines and add categories or series
										   $.each(lines, function(lineNo, line) {
												var items = line.split('=');	
											   if (lineNo == 0) {
													$.each(items, function(columnNo, item) {
															options.xAxis.categories.push(item);
													});
												}  // end if statement
												else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
													var series = {data: [ ]};
														$.each(items, function(rowNo, item) 
																{
																	if (rowNo < chartLength) {
																	series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
																};
														});//end of $.each
														series.name = 'National';					// adds name of the series
														options.series.push(series);
												}
											});	//end of $.each
											// Create the chart
											var chart = new Highcharts.Chart(options);
									});
					}
		}); //  end of resize
}); // END OF 1 YEAR




$(document).on('pageshow', '#button5', function(){  
	$(document).ready(function() {
									var options = {
										chart: {
											renderTo: 'container5',
											defaultSeriesType: 'line',
											marginLeft: 45,							//	sets left margin
											marginRight: 25,	
											zoomType: 'x',
											marginBottom: 50,
											height: $(window).height()-20,  // $(window).width(),
											showAxes: true,
											reflow: true,
										},
										plotOptions: {
													line:{							// change to what ever the type is set to
														marker: {
															enabled: false			// gets ride of points on the line
														}
													}
										},
										title: {
											text: 'National Employment'
										},
										xAxis: {
											type: 'datetime',
											categories: [ ],
											//gridLineWidth: 1,
												labels: {
													align: 'center',				//	aligns x axis labels to the left
													rotation: 0,
													step: stepSize5,						// displayes every n'th tick label
													y: 20,
													//x: -10,	
												},
											lineWidth: 2,
										},
										yAxis: {
											title: {
												text: 'Employment Rate',
												x: 5,								//	moves text in x direction
											},
											labels: {								//	aligns x axis labels to the left
													rotation: 0,
													x: -4,							//	shifts tick labels in x direction
											},
											gridLineWidth: 0,
											lineWidth: 2,
										},
										exporting: {
											buttons: {
												contextButton: {
													enabled: false,
												},
											},
										},
										legend:{
											margin: 20,
											enabled: false,							// disables legend box
										},
										series: [ ]
									};
							$.get('http://143.88.100.77:20000/test/WebForm1.aspx?countyunemployment', function (data1) 
									{ 
										data = data1;
										var lines = data.split("~");
										// Iterate over the lines and add categories or series
									   $.each(lines, function(lineNo, line) {
											var items = line.split('=');	
										   if (lineNo == 0) {
												$.each(items, function(columnNo, item) {
														options.xAxis.categories.push(item);
												});
											}  // end if statement
											else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
												
												var series = {data: [ ]};
													$.each(items, function(rowNo, item) 
															{
																if (rowNo < chartLength5) {
																series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
															};
													});//end of $.each
													series.name = 'National';					// adds name of the series
													options.series.push(series);
											}
										});	//end of $.each
										// Create the chart
										var chart = new Highcharts.Chart(options);
									});  //end of $.get
								});
		$(window).on("orientationchange", function(event) {
			var orientationTest = event.orientation;
				function getDevice() {
				return ($(window).height()	
				)};
					if ((orientationTest == 'portrait') ) {
									$(document).ready(function() {
										var options = {
											chart: {
												renderTo: 'container5',
												defaultSeriesType: 'line',
												marginLeft: 45,							//	sets left margin
												marginRight: 25,	
												zoomType: 'x',
												marginBottom: 50,
												height: $(window).height()-20,  // $(window).width(),
												showAxes: true,
												reflow: true,
											},
											plotOptions: {
														line:{							// change to what ever the type is set to
															marker: {
																enabled: false			// gets ride of points on the line
															}
														}
											},
											title: {
												text: 'National Employment'
											},
											xAxis: {
												type: 'datetime',
												categories: [ ],
												//gridLineWidth: 1,
													labels: {
														align: 'center',				//	aligns x axis labels to the left
														rotation: 0,
														step: stepSize5,						// displayes every n'th tick label
														y: 20,
														//x: -10,	
													},
												lineWidth: 2,
											},
											yAxis: {
												title: {
													text: 'Employment Rate',
													x: 5,								//	moves text in x direction
												},
												labels: {								//	aligns x axis labels to the left
														rotation: 0,
														x: -4,							//	shifts tick labels in x direction
												},
												gridLineWidth: 0,
												lineWidth: 2,
											},
											exporting: {
												buttons: {
													contextButton: {
														enabled: false,
													},
												},
											},
											legend:{
												margin: 20,
												enabled: false,							// disables legend box
											},
											series: [ ]
										};
											var lines = data.split("~");
											// Iterate over the lines and add categories or series
										   $.each(lines, function(lineNo, line) {
												var items = line.split('=');	
											   if (lineNo == 0) {
													$.each(items, function(columnNo, item) {
															options.xAxis.categories.push(item);
													});
												}  // end if statement
												else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
													
													var series = {data: [ ]};
														$.each(items, function(rowNo, item) 
																{
																	if (rowNo < chartLength5) {
																	series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
																};
														});//end of $.each
														series.name = 'National';					// adds name of the series
														options.series.push(series);
												}
											});	//end of $.each
											
											// Create the chart
											var chart = new Highcharts.Chart(options);
									});
					}else{
									$(document).ready(function() {
										var options = {
											chart: {
												renderTo: 'container5',
												defaultSeriesType: 'line',
												marginLeft: 45,							//	sets left margin
												marginRight: 25,	
												zoomType: 'x',
												marginBottom: 50,
												height: $(window).height()-20,  // $(window).width(),
												showAxes: true,
												reflow: true,
											},
											plotOptions: {
														line:{							// change to what ever the type is set to
															marker: {
																enabled: false			// gets ride of points on the line
															}
														}
											},
											title: {
												text: 'National Employment'
											},
											xAxis: {
												type: 'datetime',
												categories: [ ],
												//gridLineWidth: 1,
													labels: {
														align: 'center',				//	aligns x axis labels to the left
														rotation: 0,
														step: stepSize5,						// displayes every n'th tick label
														y: 20,
														//x: -10,	
													},
												lineWidth: 2,
											},
											yAxis: {
												title: {
													text: 'Employment Rate',
													x: 5,								//	moves text in x direction
												},
												labels: {								//	aligns x axis labels to the left
														rotation: 0,
														x: -4,							//	shifts tick labels in x direction
												},
												gridLineWidth: 0,
												lineWidth: 2,
											},
											exporting: {
												buttons: {
													contextButton: {
														enabled: false,
													},
												},
											},
											legend:{
												margin: 20,
												enabled: false,							// disables legend box
											},
											series: [ ]
										};
											var lines = data.split("~");
											// Iterate over the lines and add categories or series
										   $.each(lines, function(lineNo, line) {
												var items = line.split('=');	
											   if (lineNo == 0) {
													$.each(items, function(columnNo, item) {
															options.xAxis.categories.push(item);
													});
												}  // end if statement
												else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
													var series = {data: [ ]};
														$.each(items, function(rowNo, item) 
																{
																	if (rowNo < chartLength5) {
																	series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
																};
														});//end of $.each
														series.name = 'National';					// adds name of the series
														options.series.push(series);
												}
											});	//end of $.each
											// Create the chart
											var chart = new Highcharts.Chart(options);
									});
					}
		}); //  end of resize
}); // END OF 5 YEAR



$(document).on('pageshow', '#button10', function(){  
	$(document).ready(function() {
									var options = {
										chart: {
											renderTo: 'container10',
											defaultSeriesType: 'line',
											marginLeft: 45,							//	sets left margin
											marginRight: 25,	
											zoomType: 'x',
											marginBottom: 50,
											height: $(window).height()-20,  // $(window).width(),
											showAxes: true,
											reflow: true,
										},
										plotOptions: {
													line:{							// change to what ever the type is set to
														marker: {
															enabled: false			// gets ride of points on the line
														}
													}
										},
										title: {
											text: 'National Employment'
										},
										xAxis: {
											type: 'datetime',
											categories: [ ],
											//gridLineWidth: 1,
												labels: {
													align: 'center',				//	aligns x axis labels to the left
													rotation: 0,
													step: stepSize10,						// displayes every n'th tick label
													y: 20,
													//x: -10,	
												},
											lineWidth: 2,
										},
										yAxis: {
											title: {
												text: 'Employment Rate',
												x: 5,								//	moves text in x direction
											},
											labels: {								//	aligns x axis labels to the left
													rotation: 0,
													x: -4,							//	shifts tick labels in x direction
											},
											gridLineWidth: 0,
											lineWidth: 2,
										},
										exporting: {
											buttons: {
												contextButton: {
													enabled: false,
												},
											},
										},
										legend:{
											margin: 20,
											enabled: false,							// disables legend box
										},
										series: [ ]
									};
							$.get('http://143.88.100.77:20000/test/WebForm1.aspx?countyunemployment', function (data1) 
									{ 
										data = data1;
										var lines = data.split("~");
										// Iterate over the lines and add categories or series
									   $.each(lines, function(lineNo, line) {
											var items = line.split('=');	
										   if (lineNo == 0) {
												$.each(items, function(columnNo, item) {
														options.xAxis.categories.push(item);
												});
											}  // end if statement
											else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
												
												var series = {data: [ ]};
													$.each(items, function(rowNo, item) 
															{
																if (rowNo < chartLength10) {
																series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
															};
													});//end of $.each
													series.name = 'National';					// adds name of the series
													options.series.push(series);
											}
										});	//end of $.each
										// Create the chart
										var chart = new Highcharts.Chart(options);
									});  //end of $.get
								});
		$(window).on("orientationchange", function(event) {
			var orientationTest = event.orientation;
				function getDevice() {
				return ($(window).height()	
				)};
					if ((orientationTest == 'portrait') ) {
									$(document).ready(function() {
										var options = {
											chart: {
												renderTo: 'container10',
												defaultSeriesType: 'line',
												marginLeft: 45,							//	sets left margin
												marginRight: 25,	
												zoomType: 'x',
												marginBottom: 50,
												height: $(window).height()-20,  // $(window).width(),
												showAxes: true,
												reflow: true,
											},
											plotOptions: {
														line:{							// change to what ever the type is set to
															marker: {
																enabled: false			// gets ride of points on the line
															}
														}
											},
											title: {
												text: 'National Employment'
											},
											xAxis: {
												type: 'datetime',
												categories: [ ],
												//gridLineWidth: 1,
													labels: {
														align: 'center',				//	aligns x axis labels to the left
														rotation: 0,
														step: stepSize10,						// displayes every n'th tick label
														y: 20,
														//x: -10,	
													},
												lineWidth: 2,
											},
											yAxis: {
												title: {
													text: 'Employment Rate',
													x: 5,								//	moves text in x direction
												},
												labels: {								//	aligns x axis labels to the left
														rotation: 0,
														x: -4,							//	shifts tick labels in x direction
												},
												gridLineWidth: 0,
												lineWidth: 2,
											},
											exporting: {
												buttons: {
													contextButton: {
														enabled: false,
													},
												},
											},
											legend:{
												margin: 20,
												enabled: false,							// disables legend box
											},
											series: [ ]
										};
											var lines = data.split("~");
											// Iterate over the lines and add categories or series
										   $.each(lines, function(lineNo, line) {
												var items = line.split('=');	
											   if (lineNo == 0) {
													$.each(items, function(columnNo, item) {
															options.xAxis.categories.push(item);
													});
												}  // end if statement
												else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
													
													var series = {data: [ ]};
														$.each(items, function(rowNo, item) 
																{
																	if (rowNo < chartLength10) {
																	series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
																};
														});//end of $.each
														series.name = 'National';					// adds name of the series
														options.series.push(series);
												}
											});	//end of $.each
											
											// Create the chart
											var chart = new Highcharts.Chart(options);
									});
					}else{
									$(document).ready(function() {
										var options = {
											chart: {
												renderTo: 'container10',
												defaultSeriesType: 'line',
												marginLeft: 45,							//	sets left margin
												marginRight: 25,	
												zoomType: 'x',
												marginBottom: 50,
												height: $(window).height()-20,  // $(window).width(),
												showAxes: true,
												reflow: true,
											},
											plotOptions: {
														line:{							// change to what ever the type is set to
															marker: {
																enabled: false			// gets ride of points on the line
															}
														}
											},
											title: {
												text: 'National Employment'
											},
											xAxis: {
												type: 'datetime',
												categories: [ ],
												//gridLineWidth: 1,
													labels: {
														align: 'center',				//	aligns x axis labels to the left
														rotation: 0,
														step: stepSize10,						// displayes every n'th tick label
														y: 20,
														//x: -10,	
													},
												lineWidth: 2,
											},
											yAxis: {
												title: {
													text: 'Employment Rate',
													x: 5,								//	moves text in x direction
												},
												labels: {								//	aligns x axis labels to the left
														rotation: 0,
														x: -4,							//	shifts tick labels in x direction
												},
												gridLineWidth: 0,
												lineWidth: 2,
											},
											exporting: {
												buttons: {
													contextButton: {
														enabled: false,
													},
												},
											},
											legend:{
												margin: 20,
												enabled: false,							// disables legend box
											},
											series: [ ]
										};
											var lines = data.split("~");
											// Iterate over the lines and add categories or series
										   $.each(lines, function(lineNo, line) {
												var items = line.split('=');	
											   if (lineNo == 0) {
													$.each(items, function(columnNo, item) {
															options.xAxis.categories.push(item);
													});
												}  // end if statement
												else if (lineNo == columnNumber){						// selects column by its number, or select all by using >= 0
													var series = {data: [ ]};
														$.each(items, function(rowNo, item) 
																{
																	if (rowNo < chartLength10) {
																	series.data.push(parseFloat(item));	// parses a string and returns number as a number not a string
																};
														});//end of $.each
														series.name = 'National';					// adds name of the series
														options.series.push(series);
												}
											});	//end of $.each
											// Create the chart
											var chart = new Highcharts.Chart(options);
									});
					}
		}); //  end of resize
}); // END OF 10 YEAR
